<template>
    <div>
        <h1>超市</h1>
    <p>商品名称：<input type="text" v-model="form.name"></p>
    <p>商品价钱：<input type="text" v-model="form.price"></p>
        <button @click="add">添加</button>
        <table><tr>
            <td>名称</td>
            <td>价钱</td>
            <td>操作</td>
        </tr>
        <tr v-for="i in shop">
            <td>{{i.name}}</td>
            <td>${{i.price}}</td>
            <td><button @click="del(i.id)">删除</button></td>
        </tr></table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{},
                shop:[]
            }
        },
        methods: {
            add(){
                this.$axios.post('/order',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        alert('添加成功')
                    this.form = {}
                    this.get_shop()
                    }

                })
                },
                get_shop(){
                    this.$axios.get('/order')
                    .then(res=>{
                        if(res.data.code==200){
                            this.shop = res.data.list
                        }

                    })

                },
                del(id){
                    this.$axios.delete('/order?id='+id)
                    .then(res=>{
                        if(res.data.code==200){
                        alert('删除成功')
                        this.get_shop()

                    }})

                }

        },
        mounted() {
            
            this.get_shop()
        },
        
    }
</script>

<style scoped>

</style>